<template>
    <div>
        <el-switch v-model="theme" />
        <el-switch v-model="showOne" />
        
    </div>

    <div v-if="showOne" class="showOne">
        <v-chart v-if="theme" theme="dark" class="chart" :option="state.option" />
        <v-chart v-else="theme" theme="light" class="chart" :option="state.option" />
    </div>
    <div v-else class="showAll">
        <v-chart v-if="theme" theme="dark" class="chart1" :option="state.option1" />
        <v-chart v-else="theme" theme="light" class="chart1" :option="state.option1" />

        <v-chart v-if="theme" theme="dark" class="chart1" :option="state.option2" />
        <v-chart v-else="theme" theme="light" class="chart1" :option="state.option2" />

        <v-chart v-if="theme" theme="dark" class="chart1" :option="state.option3" />
        <v-chart v-else="theme" theme="light" class="chart1" :option="state.option3" />

        <v-chart v-if="theme" theme="dark" class="chart1" :option="state.option4" />
        <v-chart v-else="theme" theme="light" class="chart1" :option="state.option4" />
    </div>
    
</template>

<script setup>
import { use } from 'echarts/core'
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import VChart, { THEME_KEY } from 'vue-echarts'
import { ref, provide, reactive, onMounted, watch } from 'vue'
import axios from 'axios'
import { Menu as IconMenu, Picture, Setting } from '@element-plus/icons-vue'


use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

const theme = ref(false)
const showOne = ref(false)

const moduleDataList = reactive({
    dateDataList: [],
    yuexianDataList: [],
    ruqinDataList: [],
    jujiDataList: [],
    paowuDataList: [],
    totalDataList: [],
})
provide(THEME_KEY, 'light')
const base_url = "http://10.82.14.162:8000/szw/"
const option_template = {
    title: {
        text: '深圳湾智能功能报警'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['越线', '入侵', '聚集', '抛物', '总数']
    },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        inverse: true,
        data: []
    },
    yAxis: {
        type: 'value',
        splitNumber: 10,
        scale: true,
    },
    series: []
}

const state = reactive({
    option: Object.assign({}, option_template),
    option1: Object.assign({}, option_template),
    option2: Object.assign({}, option_template),
    option3: Object.assign({}, option_template),
    option4: Object.assign({}, option_template),
});


watch(() => {
    state.option.data = ['越线', '入侵', '聚集', '抛物', '总数']
    state.option.xAxis.data = moduleDataList.dateDataList
    state.option.series = [{
        name: '越线',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.yuexianDataList,
        smooth: true
        
    },
    {
        name: '入侵',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.ruqinDataList,
        smooth: true
    },
    {
        name: '聚集',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.jujiDataList,
        smooth: true
    },
    {
        name: '抛物',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.paowuDataList,
        smooth: true
    },
    {
        name: '总数',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.totalDataList,
        smooth: true
    }]

    state.option1.title = {text: '越线'}
    state.option1.legend = {data: ['越线']}
    state.option1.data = ['越线']
    state.option1.xAxis.data = moduleDataList.dateDataList
    state.option1.series = [{
        name: '越线',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.yuexianDataList,
        smooth: true
    }]

    state.option2.title = {text: '入侵'}
    state.option2.legend = {data: ['入侵']}
    state.option2.data = ['入侵']
    state.option2.xAxis.data = moduleDataList.dateDataList
    state.option2.series = [{
        name: '入侵',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.ruqinDataList,
        smooth: true
    }]

    state.option3.title = {text: '聚集'}
    state.option3.legend = {data: ['聚集']}
    state.option3.data = ['聚集']
    state.option3.xAxis.data = moduleDataList.dateDataList
    state.option3.series = [{
        name: '聚集',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.jujiDataList,
        smooth: true
    }]

    state.option4.title = {text: '抛物'}
    state.option4.legend = {data: ['抛物']}
    state.option4.data = ['抛物']
    state.option4.xAxis.data = moduleDataList.dateDataList
    state.option4.series = [{
        name: '抛物',
        type: 'line',
        stack: 'Total',
        data: moduleDataList.paowuDataList,
        smooth: true
    }]
    
})


const getSzwData = () => {
    axios.get(base_url).then(res => {
        res.data.forEach(element => {
            moduleDataList.dateDataList.push(element.date)
            moduleDataList.yuexianDataList.push(element.yuexian)
            moduleDataList.ruqinDataList.push(element.ruqin)
            moduleDataList.jujiDataList.push(element.juji)
            moduleDataList.paowuDataList.push(element.paowu)
            moduleDataList.totalDataList.push(element.total)
        });
    }).catch(err => {
        console.log(err);
    })
}

onMounted(() => {
    getSzwData();
})

</script>

<style scoped lang="less">
.showOne {
    .chart {
    height: 600px;
    }
}
.showAll {
    .chart1 {
        height: 350px;
        width: 50%;
        display: inline-flex;
    }
}

</style>